<template>
  <el-dialog v-model="modalController.popups.newAssessmentModal" title="新建考核" width="60%" :before-close="handleClose">
    <el-form :model="form" ref="formRef" :rules="rules" label-width="120px" class="assessment-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="考核名称" prop="name">
            <el-input v-model="form.title"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="考核类型" prop="type">
            <el-select v-model="form.examSectionName" placeholder="请选择考核类型">
              <el-option label="理论考核" value="理论考核"></el-option>
              <el-option label="实操考核" value="实操考核"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="form.startTime" type="datetime" placeholder="选择日期时间"
              value-format="YYYY-MM-DD HH:mm:ss" @change="onStartTimeChange"
              :disabled-date="disabledStartDate"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间"
              value-format="YYYY-MM-DD HH:mm:ss" :disabled-date="disabledEndDate"></el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row :gutter="20">
        <el-col :span="12">
          <el-form-item label="课程名称" prop="course">
            <el-select v-model="form.courseName" placeholder="请选择关联课程">
              <el-option :label="data.course.title" :value="data.course.title"
                v-for="data in userStore.teacher_myCourse"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="考核描述" prop="description">
        <el-input type="textarea" v-model="form.description"
          placeholder="请添加考试时间描述，以数字+分钟的形式，如：考试时长90分钟。否则默认为90分钟"></el-input>
      </el-form-item>
      <el-row :gutter="20" v-if="isEdit">
        <el-col :span="12">
          <el-form-item label="考核状态" prop="status">
            <!-- <el-select v-model="form.status" placeholder="请选择考核状态">
              <el-option label="草稿" value="draft"></el-option>
              <el-option label="已发布" value="published"></el-option>
            </el-select> -->
            <el-select v-model="mappedStatus" placeholder="请选择考核状态" @change="onStatusChange">
              <el-option label="草稿" value="draft"></el-option>
              <el-option label="已发布" value="published"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>

      <!--      <el-form-item label="总分设置" prop="totalScore">-->
      <!--        <el-input-number v-model="form.totalScore" :min="1"></el-input-number>-->
      <!--      </el-form-item>-->

      <!--      <el-form-item label="及格分数" prop="passingScore">-->
      <!--        <el-input-number v-model="form.passingScore" :min="0"></el-input-number>-->
      <!--      </el-form-item>-->

      <!--      <el-form-item label="题目来源" prop="questionSource">-->
      <!--        <el-radio-group v-model="form.questionSource">-->
      <!--          <el-radio label="source-bank">从题库选择</el-radio>-->
      <!--          <el-radio label="source-new">手动出题</el-radio>-->
      <!--        </el-radio-group>-->
      <!--      </el-form-item>-->

      <!--      <div v-if="form.questionSource === 'source-bank'">-->
      <!--        <el-form-item label="选择题库" prop="questionBankId">-->
      <!--          <el-select v-model="form.questionBankId" placeholder="请选择题库">-->
      <!--            <el-option label="护理基础题库" value="1"></el-option>-->
      <!--            <el-option label="急救技能题库" value="2"></el-option>-->
      <!--          </el-select>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="题目数量" prop="questionCount">-->
      <!--          <el-input-number-->
      <!--            v-model="form.questionCount"-->
      <!--            :min="1"-->
      <!--          ></el-input-number>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="单选题分值" prop="singleChoiceScore">-->
      <!--          <el-input-number-->
      <!--            v-model="form.singleChoiceScore"-->
      <!--            :min="0"-->
      <!--          ></el-input-number>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="多选题分值" prop="multipleChoiceScore">-->
      <!--          <el-input-number-->
      <!--            v-model="form.multipleChoiceScore"-->
      <!--            :min="0"-->
      <!--          ></el-input-number>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="判断题分值" prop="trueFalseScore">-->
      <!--          <el-input-number-->
      <!--            v-model="form.trueFalseScore"-->
      <!--            :min="0"-->
      <!--          ></el-input-number>-->
      <!--        </el-form-item>-->
      <!--        <el-form-item label="简答题分值" prop="essayScore">-->
      <!--          <el-input-number v-model="form.essayScore" :min="0"></el-input-number>-->
      <!--        </el-form-item>-->
      <!--      </div>-->

      <!--      <div v-else>-->
      <!--        &lt;!&ndash; 手动出题界面，此处可放置题目编辑组件 &ndash;&gt;-->
      <!--        <el-alert-->
      <!--          title="手动出题功能开发中..."-->
      <!--          type="info"-->
      <!--          show-icon-->
      <!--          :closable="false"-->
      <!--        />-->
      <!--      </div>-->

      <!--      <el-form-item label="参与人员" prop="participants">-->
      <!--        <el-select-->
      <!--          v-model="form.participants"-->
      <!--          multiple-->
      <!--          filterable-->
      <!--          placeholder="请选择参与人员"-->
      <!--        >-->
      <!--          <el-option label="所有学生" value="all"></el-option>-->
      <!--          <el-option label="张三" value="zhangsan"></el-option>-->
      <!--          <el-option label="李四" value="lisi"></el-option>-->
      <!--        </el-select>-->
      <!--      </el-form-item>-->
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <!-- 编辑模式下显示的按钮 -->
        <template v-if="isEdit">
          <el-button @click="handleClose">取消</el-button>
          <el-button type="primary" @click="handleSubmit">保存修改</el-button>
        </template>
        <!-- 新建模式下显示的按钮 -->
        <template v-else>
          <el-button @click="handleClose">取消</el-button>
          <el-button @click="handleSubmit('draft')">保存为草稿</el-button>
          <!-- <el-button type="primary" @click="handleSubmit('published')">创建并发布</el-button> -->
        </template>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted ,computed} from "vue";
import { ElMessage } from "element-plus";
import { modalControllers } from "@/stores/modalController.js";
import { useUserStore } from "@/stores/user.js";
import { watch } from 'vue';
import { useExamStore } from '@/stores/exam.js';
const emit = defineEmits();
const userStore = useUserStore();
const examStore = useExamStore();
const modalController = modalControllers();
const formRef = ref(null);
// const form = reactive({
//   name: "",
//   type: "",
//   startTime: "",
//   endTime: "",
//   description: "",
//   totalScore: 100,
//   passingScore: 60,
//   questionSource: "source-bank", // 'source-bank' or 'source-new'
//   questionBankId: "",
//   questionCount: 10,
//   singleChoiceScore: 5,
//   multipleChoiceScore: 10,
//   trueFalseScore: 5,
//   essayScore: 15,
//   participants: [],
// });
const form = ref({});
const props = defineProps({
  modelValue: Boolean, // 用于 v-model
  examData: {
    type: Object, // 它可以是一个对象（用于编辑）或 null（用于创建）
    default: null,
  },
});
const mappedStatus = computed({
  get() {
    return form.value.status === "draft" ? "draft" : "published";
  },
  set(val) {
    form.value.status = val; // 只允许 draft 或 published
  },
});

// 响应 @change 事件（可选，其实不一定需要）
const onStatusChange = (val) => {
  form.value.status = val;
};
const defaultForm = {
  title: "",
  examSectionName: "", // 对应父组件的 examType
  startTime: "",
  endTime: "",
  courseName: "",
  description: "",
  status: 'draft' // 新增：为新建的考核设置默认状态
};
const isEdit = ref(false);

watch(() => props.examData, (newData) => {
  if (newData) {
    // 编辑模式
    isEdit.value = true;
    // 使用 Object.assign 确保响应性，并映射字段
    form.value = Object.assign({}, defaultForm, newData, {
      examSectionName: newData.examType // 将 examType 映射到 examSectionName
    });
  } else {
    // 新建模式
    isEdit.value = false;
    form.value = { ...defaultForm };
  }
},
  { immediate: true, deep: true }
);

const disabledStartDate = (time) => {
  // 1. 在“编辑”模式下，执行新的、更细致的判断
  if (isEdit.value && props.examData?.startTime) {
    // 获取原始开始日期（去掉时分秒，只比较天）
    const originalStartDate = new Date(props.examData.startTime);
    originalStartDate.setHours(0, 0, 0, 0);

    // 获取今天的日期（去掉时分秒，只比较天）
    const today = new Date();
    today.setHours(0, 0, 0, 0);

    // 关键：取“原始开始日期”和“今天”中更晚的那个作为最早可选日期
    const boundaryDate = new Date(Math.min(originalStartDate.getTime(), today.getTime()));

    // 禁用所有在最早可选日期之前的日期
    if (time.getTime() < boundaryDate.getTime()) {
      return true;
    }

  } else {
    // 2. 在“新建”模式下，规则不变，禁用今天之前的日期
    const today = new Date();
    today.setHours(0, 0, 0, 0);
    if (time.getTime() < today.getTime()) {
      return true;
    }
  }

  // 3. 通用规则：如果已选择结束时间，则禁用结束时间之后的所有日期（此逻辑不变）
  if (form.value.endTime) {
    return time.getTime() > new Date(form.value.endTime).getTime();
  }

  return false;
};

// 用于禁用“结束时间”选择器的函数
const disabledEndDate = (time) => {
  // 如果用户还未选择开始时间，则不禁用任何日期
  if (!form.value.startTime) {
    return false;
  }

  // 禁用开始时间之前的所有日期
  // 为了可以选择到同一天，我们需要将开始时间的时分秒设为0进行比较
  const startTime = new Date(form.value.startTime);
  startTime.setHours(0, 0, 0, 0);
  return time.getTime() < startTime.getTime();
};

const validateEndTime = (rule, value, callback) => {
  // 只有当开始时间和结束时间都存在时，才进行比较
  if (form.value.startTime && value) {
    const startTime = new Date(form.value.startTime);
    const endTime = new Date(value);
    if (endTime < startTime) {
      callback(new Error('结束时间不能早于开始时间！'));
    } else {
      callback(); // 校验通过
    }
  } else {
    callback(); // 如果任一时间为空，则不进行此项校验，让 required 规则处理
  }
};
const onStartTimeChange = () => {
  // 确保 formRef 已经挂载，并且结束时间已有值
  if (formRef.value && form.value.endTime) {
    formRef.value.validateField('endTime');
  }
};
const rules = reactive({
  title: [{ required: true, message: "请输入考核名称", trigger: "blur" }],
  examSectionName: [{ required: true, message: "请选择考核类型", trigger: "change" }],
  courseName: [{ required: true, message: "请选择关联课程", trigger: "change" }],
  startTime: [{ required: true, message: "请选择开始时间", trigger: "change" }],
  endTime: [
    { required: true, message: "请选择结束时间", trigger: "change" },
    // 将自定义校验函数应用到 endTime 字段
    { validator: validateEndTime, trigger: 'change' }
  ],
});

const handleClose = () => {
  isEdit.value = false;
  modalController.closePopup("newAssessmentModal");
};
// const saveAsDraft = () => {
//   formRef.value.validate((valid) => {
//     if (!valid) {
//       ElMessage.error("请检查表单项！");
//       return;
//     }

//     // 构造后端需要的 exam 数据对象
//     const examData = {
//       title: form.value.title,
//       examSectionName: form.value.examSectionName,
//       startTime: fixDateString(form.value.startTime),
//       endTime: fixDateString(form.value.endTime),
//       courseName: form.value.courseName,
//       description: form.value.description,
//       creatorName: userStore.user.name, // 可选字段，确保后端有创建人信息
//       creatorId: userStore.user.id, // 可选字段，确保后端有创建人信息
//       status: "published"
//     };
//     console.log("isEdit:", isEdit.value);
//     console.log("提交数据：", JSON.stringify(examData.startTime));
//     if (isEdit.value) {
//       examStore.updateExam(
//         props.examData.id,
//         examData,
//         () => {
//           emit("refresh"); // 通知父组件刷新列表
//           handleClose();
//         }
//       )
//     } else {
//       examStore.createExam(
//         examData,
//         () => {
//           emit("refresh"); // 通知父组件刷新列表
//           handleClose();
//         },
//         (errMessage) => {
//           console.error("草稿保存失败：", errMessage);
//           ElMessage.error("草稿保存失败：" + errMessage);
//         }
//       );
//     }

//   });
// };

const handleSubmit = (publishStatus = null) => {
  formRef.value.validate((valid) => {
    if (!valid) {
      ElMessage.error("请检查表单项是否填写完整！");
      return;
    }

    // 准备要提交给后端的数据载荷
    const payload = {
      examSectionName: form.value.examSectionName,
      courseName: form.value.courseName,
      title: form.value.title,
      description: form.value.description,
      startTime: fixDateString(form.value.startTime),
      endTime: fixDateString(form.value.endTime),
      status: form.value.status,
    };

    if (isEdit.value) {
      let finalStatus = form.value.status; // 先获取用户选择的状态
      if (form.value.status === 'published') {
        const now = new Date();
        const startTime = new Date(payload.startTime);
        const endTime = new Date(payload.endTime);

        if (now > endTime) {
          finalStatus = 'ended'; // 如果当前时间已超过结束时间，则状态为“已结束”
        } else if (now >= startTime && now <= endTime) {
          finalStatus = 'ongoing'; // 如果当前时间在起止时间之间，则状态为“进行中”
        }
        // 否则，当前时间早于开始时间，状态保持为 'published'
      }

      // 2. 将最终计算出的状态赋给 payload
      payload.status = finalStatus;

      // 3. 调用更新接口
      examStore.updateExam(
        props.examData.id,
        payload,
        () => {
          //ElMessage.success("考核更新成功！");
          emit("refresh");
          handleClose();
        }
      );
    } else {
      // --- 新建模式的逻辑 ---
      // 根据点击的按钮决定状态
      payload.status = publishStatus;
      // 添加创建人信息
      payload.creatorId = userStore.user.id;

      examStore.createExam(
        payload,
        () => {
          ElMessage.success(`考核已${publishStatus === 'draft' ? '保存为草稿' : '创建并发布'}！`);
          emit("refresh");
          handleClose();
        },
        (errMessage) => {
          ElMessage.error(`操作失败：${errMessage}`);
        }
      );
    }
  });
};

function fixDateString(str) {
  // 如果是 ISO 格式字符串（包含 T），我们格式化一下
  if (typeof str === 'string' && str.includes('T')) {
    const d = new Date(str);
    const y = d.getFullYear();
    const m = String(d.getMonth() + 1).padStart(2, '0');
    const day = String(d.getDate()).padStart(2, '0');
    const h = String(d.getHours()).padStart(2, '0');
    const min = String(d.getMinutes()).padStart(2, '0');
    const s = String(d.getSeconds()).padStart(2, '0');
    return `${y}-${m}-${day} ${h}:${min}:${s}`;
  }
  return str; // 原本就是正确格式
}

// const createAndPublish = async () => {
//   console.log("创建并发布", form);
//   await userStore.createExam();
//   await userStore.selectTeacherExam("李老师");
//   emit("refresh");
//   handleClose();
// };
</script>

<style scoped>
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
